<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>13.layui弹出层</title>
        <link rel="stylesheet" href="static/layui-2.5.6/css/layui.css">
    </head>
    <body>
        <div class="layui-container">
            <form class="layui-form layui-form-pane" action="">
                <div class="layui-form-item">
                    <label class="layui-form-label">姓名</label>
                    <div class="layui-input-block">
                        <input type="text" name="name" required lay-verify="required" placeholder="输入姓名"
                               autocomplete="off" class="layui-input">
                    </div>
                </div>

                <!-- 行内表单 -->
                <div class="layui-form-item">
                    <!-- 外层行内 -->
                    <div class="layui-inline">
                        <label class="layui-form-label">年龄范围</label>
                        <!-- 内层行内 -->
                        <div class="layui-input-inline" style="width: 100px;">
                            <input type="number" name="age_min" placeholder="岁" autocomplete="off"
                                   class="layui-input">
                        </div>
                        <!-- 分割号 -->
                        <div class="layui-form-mid">-</div>
                        <div class="layui-input-inline" style="width: 100px;">
                            <input type="number" name="age_max" placeholder="岁" autocomplete="off"
                                   class="layui-input">
                        </div>
                    </div>

                    <div class="layui-inline" pane>
                        <label class="layui-form-label" id="psd">密码</label>
                        <div class="layui-input-inline" style="width: 80px;">
                            <input type="password" name="" autocomplete="off" class="layui-input">
                        </div>
                        <label class="layui-form-label">强加密</label>
                        <div class="layui-input-inline" style="width: 70px;">
                            <!-- lay-ignore是忽略layui的样式 -->
                            <input type="checkbox" name="switch01" lay-skin="switch" lay-text="开启|关闭">
                        </div>
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">手机号</label>
                    <div class="layui-input-block">
                        <input type="text" name="phone" required lay-verify="phone" placeholder="输入手机"
                               autocomplete="off" class="layui-input">
                    </div>
                </div>
            </form>
        </div>


        <script src="static/layui-2.5.6/layui.js"></script>
        <script>
            // layer是弹出层
            layui.use(['layer', 'form', 'element'], function () {
                var layer = layui.layer,
                    form = layui.form,
                    element = layui.element;

                //监听提交
                form.on('submit(formDemo)', function (data) {
                    layer.msg(JSON.stringify(data.field));
                    return false;
                });

                // layer.open({
                //     type: 0,
                //     title: "你好",
                //     content: '传入任意的文本或html' //这里content是一个普通的String
                // });

                // layer.open({
                //     type: 1,
                //     title: "你好",
                //     content: "hello world!"
                // });

                // /!*如果是iframe层 */
                // layer.open({
                //     type: 2,
                //     content: 'http://baidu.com'
                // });

                // /!*如果是用layer.open执行tips层 */
                // layer.open({
                //     type: 4,
                //     content: ['fuck x', '#psd']
                // });

                // 图标
                //eg1
                // layer.alert('酷毙了', {icon: 1});
                //eg2
                // layer.msg('不开心。。', {icon: 5});
                //eg3
                // layer.load(1); //风格1的加载
            });

        </script>
    </body>
</html>
